<template>
  <div class="reqDetailContent">
    <ul>
      <li>
        <span>需求名称</span>
        <span>{{ demand.demandName }}</span>
      </li>
      <li>
        <span>需求描述</span>
        <span>{{ demand.demandDescribe }}</span>
      </li>
      <li>
        <span>所属企业</span>
        <span>{{ demand.enterpriseId }}</span>
      </li>
      <li>
        <span>项目名称</span>
        <span>{{ demand.projectName }}</span>
      </li>
      <li>
        <span>分类</span>
        <span>{{ demand.relation }}</span>
      </li>
      <li>
        <span>发布时间</span>
        <span>{{ demand.gmtCreated }}</span>
      </li>
      <li>
        <span>联系方式</span>
        <span>{{ demand.contact }}</span>
      </li>
      <li>
        <span>状态</span>
        <span>
          <div>
            <div v-if="demand.status === 0">
              <el-select
                      v-model="demand.modifyStatus"
                      placeholder="未处理"
                      @change="
                  mdfStatus(demand, demand.demandId, demand.modifyStatus)
                "
                      clearable
              >
                <el-option label="未处理" value="未处理"> </el-option>
                <el-option label="处理中" value="处理中"> </el-option>
                <el-option label="处理完成" value="处理完成"> </el-option>
                <el-option label="需求关闭" value="需求关闭"> </el-option>
              </el-select>
            </div>
            <div v-if="demand.status === 1">
              <el-select
                      v-model="demand.modifyStatus"
                      placeholder="处理中"
                      @change="
                  mdfStatus(demand, demand.demandId, demand.modifyStatus)
                "
                      clearable
              >
                <el-option label="未处理" value="未处理"> </el-option>
                <el-option label="处理中" value="处理中"> </el-option>
                <el-option label="处理完成" value="处理完成"> </el-option>
                <el-option label="需求关闭" value="需求关闭"> </el-option>
              </el-select>
            </div>
            <div v-if="demand.status === 2">
              <el-select
                      v-model="demand.modifyStatus"
                      placeholder="处理完成"
                      @change="
                  mdfStatus(demand, demand.demandId, demand.modifyStatus)
                "
                      clearable
              >
                <el-option label="未处理" value="未处理"> </el-option>
                <el-option label="处理中" value="处理中"> </el-option>
                <el-option label="处理完成" value="处理完成"> </el-option>
                <el-option label="需求关闭" value="需求关闭"> </el-option>
              </el-select>
            </div>
            <div v-if="demand.status === 3">
              <el-select
                      v-model="demand.modifyStatus"
                      placeholder="需求关闭"
                      @change="
                  mdfStatus(demand, demand.demandId, demand.modifyStatus)
                "
                      clearable
              >
                <el-option label="未处理" value="未处理"> </el-option>
                <el-option label="处理中" value="处理中"> </el-option>
                <el-option label="处理完成" value="处理完成"> </el-option>
                <el-option label="需求关闭" value="需求关闭"> </el-option>
              </el-select>
            </div>
          </div>
        </span>
      </li>
      <li @click="projectAssess">
        <span>项目评分</span>
        <span>
          <i style="font-size: 20px;" class="el-icon-remove-outline"></i>
        </span>
      </li>
    </ul>
    <!-- 成员分布 -->
    <div class="personAssign" @click="enterPersonAssign">
      <h2>成员分配</h2>
      <ul>
        <li v-for="(item, index) in personAll" :key="index">
          <span>{{ item[0] }}</span>
          <span>
            <span v-for="(it, ind) in item[1]" :key="ind">{{ it.name }}</span>
          </span>
        </li>
      </ul>
    </div>
    <!-- 添加附件 -->
    <div class="appendix">
      <h2>添加附录</h2>
      <ul>
        <li>
          <span
            ><a :href="demand.docFilesUrl"
              ><i class="el-icon-paperclip"></i> 文档.md</a
            >
          </span>
          <span>删除</span>
        </li>
      </ul>
    </div>

    <!-- 评论 -->
    <div class="comment">
      <h2>
        <span>评论</span>
        <span><i class="el-icon-edit"></i></span>
      </h2>
      <!-- 一级评论 -->
      <div class="commentInput">
        <el-avatar icon="el-icon-user-solid"></el-avatar>
        <el-input placeholder="请输入内容"  v-model="firstComment"></el-input>
        <el-button size="mini" type="primary" @click="commentFirst">评论</el-button>
      </div>

      <div v-if="firstCommentList.length === 0">
        <el-empty description="暂无评论信息..."></el-empty>
      </div>
      <div v-else>
        <CommentItemMobel
          v-for="(item, index) in firstCommentList" :comment = "item"
          :key="index"
        ></CommentItemMobel>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ReqDemandDetailInfoById,
  ReqPersonByProjectId,
  ReqCommentParent,
  ReqManchangeStatus,
  ReqAddComment
} from "../../../request";
import CommentItemMobel from "../../../components/CommentItemMobel.vue";
export default {
  data() {
    return {
      demand: {},
      options: {},
      value: "",
      person: [],
      comment: [],
      personAll: [],
      firstCommentList:[],
      firstComment:''
    };
  },
  components: {
    CommentItemMobel,
  },
  methods: {
    enterPersonAssign() {
      this.$router.history.push(
        `/self/manage/personAssignMobel?projectId=${this.demand.projectId}`
      );
    },
    projectAssess() {
      this.$router.history.push(
        `/self/manage/projectAssessMobel?projectId=${this.demand.projectId}&demandId=${this.demand.demandId}`
      );
    },
    // 获取需求详情
    async getDemandDetailInfo() {
      const query = this.$router.history.current.query;
      const demandDetailInfo = await ReqDemandDetailInfoById({
        id: query.demandId,
      });
      const { demandVo } = demandDetailInfo;
      this.demand = {
        demandStauts: demandVo.demand?.status,
        demandId: demandVo.demand?.id,
        demandName: demandVo.demand?.demandName,
        demandDescribe: demandVo.demand?.demandDescribe,
        docReqFilesUrl: demandVo.demand?.docFilesUrl,
        enterpriseId: demandVo.demand?.enterpriseId,
        relation: demandVo.relation.value,
        projectName: demandVo.project?.projectName,
        gmtCreated: demandVo.project?.gmtCreated,
        contact: demandVo.project?.contact,
        docFilesUrl: demandVo.project?.docFilesUrl,
        status: demandVo.project?.status,
        projectId: demandVo.project?.id,
        remarks: demandVo.project?.remarks,
        docFilesUrl: demandVo.demand.docFilesUrl,
      };
    },
    // 获取项目成员
    async getProjectPerson() {
      const resultData = await ReqPersonByProjectId({
        projectId: this.demand.projectId,
      });
      const { scoreVo } = resultData;
      if (scoreVo) {
        const map = new Map();
        scoreVo.forEach((item) => {
          if (map.has(item.position)) {
            map.get(item.position).push(item);
          } else {
            map.set(item.position, [item]);
          }
        });
        this.personAll = Array.from(map);
      }
    },
    // 查看更多回复
    async seeMoreCallBack(id) {
      const resultData = await ReqCommentCallBackById({ commentId: id });
      const { remarks } = resultData;
      console.log(remarks);
      // 将数据加到全部的评论数据中
      this.firstCommentList.forEach((item) => {
        if (item.commentEntity.id === id) {
          item.children = remarks;
        }
      });
      console.log(this.firstCommentList);
    },
    // 发表一级评论
    async commentFirst() {
      if (this.firstComment.trim().length === 0) {
        this.$message({
          type: "warning",
          message: "请输入内容",
        });
      } else {
        let formdata = new FormData();
        formdata.append("contend", this.firstComment.trim());
        formdata.append("demandId", this.$router.history.current.query.demandId);
        formdata.append("parentId", 0);
        formdata.append("pusherId",sessionStorage.getItem("id"));
        const resultData = await ReqAddComment(formdata)
        if(resultData.msg=="success"){
          this.$message({
            type:"success",
            message: '评论成功'
          })
          this.firstComment =''
          this.getFirstComment()
        }
      }
    },
    // 获取一级评论
    async getFirstComment() {
      const query = this.$router.history.current.query;
      const resultData = await ReqCommentParent({
        demandId: query.demandId,
        limit: 1000,
        page: 1,
      });
      const {
        remarks: { list },
      } = resultData;
      this.firstCommentList = list;
      // 拿到一级评论后,进行遍历循环获取用户信息
      this.firstCommentList.forEach((item) => {
        item.isCallBack = false;
      });
      console.log(this.firstCommentList);
    },
    //修改状态
    async mdfStatus(info, id, status) {
      console.log(info);
      let formData = new FormData();
      formData.append("id", id);
      formData.append("status", status);
      let resultInfo = await ReqManchangeStatus(formData);
      console.log(resultInfo);
      if (resultInfo.msg === "success") {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "修改失败",
          type: "error",
        });
      }
    },
  },
  async created() {
    await this.getDemandDetailInfo();
    await this.getProjectPerson();
    await this.getFirstComment()
  },
};
</script>

<style scoped>
@import url("~@/assets/styles/manage/reqDetailMobel.css");
</style>
